<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
  <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
  <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>

  <script type="text/javascript">
/*
    等待页面加载完毕
*/
    $(function () {
        //ajax向后台请求数据
       /* alert("1");*/
      $.ajax({
          //url后台数据地址
          url:"${pageContext.request.contextPath}/menu/showAll",
          success:function(data){
              //data为后台传递的数据
              /*console.log(data);*/
              // 1.获取一级菜单数据 做展示 遍历
// each方法 参数1 被遍历的数据 参数2 匿名函数 函数有两个参数 位置1 下标 位置2 被遍历
              //的元素
              var content = "";
              $.each(data,function(index1,menu1) {
                  //完成一级菜单html的拼接
                  var startMenu1 = "<li class=\"layui-nav-item layui-nav-itemed\">\n" +
                      "          <a class=\"\" href=\"javascript:;\">";
                  var endMenuA = "</a><dl class=\"layui-nav-child\">"
                  //完成一级菜单name的拼接
                  content += startMenu1 + menu1.menuName + endMenuA;
                  console.log(content)
                  //2.获取二级菜单数据 做展示，遍历
                  //用each方法
                  $.each(menu1.menus, function (index2, menu2) {
                      // 在a标签后拼接二级菜单的内容  遍历二级菜单内容 menu1.child
                      // \ 符合是转义 所谓转义 有些符号 例如：单引号 双引号 都是有含义的 如没有转义 会被解析是语法的一部分
                      //  添加转义符号的引号会被当成字符串处理 不会被解析
                      var startMenu2 = "<dd><a href=\"javascript:;\" onclick='addTab(\"" +menu2.menuName+"\",\""+menu2.menuUrl+"\","+menu2.menuId+ ")'>";
                      var endMenu2 = "</a></dd>";
                      // 拼接二级菜单
                      content += startMenu2+menu2.menuName+endMenu2;

                  });

                      var endMenu1 = "</dl></li>";
                      content += endMenu1;
                  });

              // 赋值
              $("#menu_nav").html(content);
              //渲染菜单内容
              layui.use('element', function(){
                  var element = layui.element;
                    element.render('nav','menu_nav')
              });
          }
      })
    })

//打开选项卡
function addTab(menuName,menuUrl,menuId) {
    layui.use('element', function(){
        //在tabs里面添加一个选项卡
        var element = layui.element;

        // title 二级菜单的名字 iframe src 对应的是二级菜单的url id 对应的二级菜单的id
        element.tabAdd('myTab', {
            title: menuName,
            content: '<iframe src=${pageContext.request.contextPath}'+menuUrl +' height="100%" width="100%"></iframe>' //支持传入html
            ,id: menuId
        });

        element.tabChange("myTab",menuId)
    });

}
  </script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>



  <div class="layui-side layui-bg-black">
    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） 动态添加新的导航内容 -->
        <ul class="layui-nav layui-nav-tree"  lay-filter="menu_nav" id="menu_nav" lay-shrink="all">



        </ul>

      </div>
    </div>
  </div>

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
      <div class="layui-tab layui-tab-brief layui-tab-card" lay-allowClose="true" lay-filter="myTab">
        <ul class="layui-tab-title">
          <li class="layui-this">欢迎页</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">欢迎使用..xxxx</div>
        </div>
      </div>
    </div>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>

</body>
</html>